<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 名称：</p>
        <el-input v-model="queryParams.equipmentName" placeholder="请输入名称"></el-input>
      </el-col>

      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>



    <el-table :data="tableData"  border style="margin-top: 30px">
      <el-table-column prop="equipmentName" min-width="200" label="器材名"></el-table-column>
      <el-table-column prop="title" min-width="200" label="器材照片">
        <template slot-scope="scope">
          <el-image :src="scope.row.img" style="height: 40px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="model" min-width="200" label="型号"></el-table-column>
      <el-table-column prop="num" min-width="200" label="数量">
        <template slot-scope="scope">
          {{scope.row.type===1 ? '添加'+scope.row.num : '使用'+scope.row.num }}
        </template>
      </el-table-column>
      <el-table-column prop="price" min-width="200" label="总价"></el-table-column>
      <el-table-column prop="userName" min-width="200" label="使用人"></el-table-column>
      <el-table-column min-width="200"  prop="status" label="使用时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.useTime) }}
        </template>
      </el-table-column>

    </el-table>




    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>

  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {
  deleteEquipment,
  deleteNews, equipmentUseLog,
  getDict,
  getEquipment,
  getNewsList,
  insertEquipment,
  insertNews, updateEquipment,
  updateNews
} from "@/api/apiFox";

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {
        total:10
      },
      form: {},
      dialogVisible: false,
      isEdit: false,
      isView:false,
      messageType:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
        equipmentName:""
      },
      tableData: [],
      options: [
        {value: 0, label: '全部'},
        {value: 1, label: '禁用'},
        {value: 2, label: '启用'},
      ],

    }
  },
  created() {
    this.getDictList('equipment_name')
  },
  mounted() {
    this.getLists(this.queryParams)
  },
  methods: {
    parseTime,
    getDictList(item){
      getDict(item).then(res=>{
        this.messageType = res
      })
    },
    uploadImage(e){
      this.form.img = e
    },
    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        equipmentName:""
      }
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },
    getLists(params) {
      equipmentUseLog(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },
    cancel(){
      this.form = {}
      this.dialogVisible=false
      this.getLists(this.queryParams)
    },
    deleteProduct(item){
      updateEquipment({id:item.id,isdelete:1}).then(res=>{
        this.$message.success('删除成功')
        this.getLists(this.queryParams)
      })
    },
    submitProduct(){
      if (!this.form.name){
        this.$message.error('器材名必填')
        return
      }
      if (!this.form.model){
        this.$message.error('选择型号')
        return
      }
      // if (!this.form.img){
      //   this.$message.error('图片必填')
      //   return
      // }
      if (!this.form.num){
        this.$message.error('库存必填')
        return
      }
      if (!this.form.price){
        this.$message.error('价格必填')
        return
      }
      insertEquipment(this.form).then(res=>{
        this.$message.success('新增成功')
        this.cancel()
      })
    },
    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    updateProduct(){
      updateEquipment(this.form).then(res=>{
        this.$message.success('修改成功')
        this.cancel()
      })
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item

      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item

      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },

    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 0: {
          return '全部'
        }
        case 1: {
          return '禁用'
        }
        case 2: {
          return '启用'
        }
      }
    },
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
